<script setup>
import {inject} from "vue"
// import TableColumn1 from "./TableColumn1.vue";
import {ApiData} from "../../ApiConfig.js"

const props = defineProps({
    elem: {
        type: Object,
        default: () => {
            return {
                styleConfig: {},
                dataConfig: {}
            }
        }
    }
})

</script>

<template>
    <div :style="elem.styleConfig" class="TableList1">
        <table class="table">
            <tbody>
            <tr v-for="(apiData, i) in ApiData[elem.dataConfig.value]" :key="i">
                <template v-for="(column, j) in elem.children" :key="j">
                    <template v-if="column.isMerge">
                        <!--                        如果是合并列，只在最开始一行渲染-->
                        <TableListColumn1 v-if="i === 0" :apiData="apiData" :elem="column" :rowspan="ApiData[elem.dataConfig.value].length" :table="elem" />
                    </template>
                    <template v-else>
                        <TableListColumn1 :apiData="apiData" :elem="column" :table="elem" />
                    </template>
                </template>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<style lang="scss">
.TableList1 {
    position: relative;

    table {
        width: 100%;
        border-collapse: collapse;

        th, td {
            border: 1px solid transparent;
        }
    }
}
</style>